<template>
	<view class="requestRefund">
		<view class="top">
			退款商品
			<view class="goods">
				<view class="left">
					<image :src="data.httpUrl+'/app/file/viewFile?fileId='+data.info.productPicture" mode="aspectFill">
					</image>
				</view>
				<view class="right">
					<text class="ellipsis_2">{{data.info.productName}}</text>
					<text class="price">￥{{data.info.price}}</text>
					<view class="">
						{{data.info.specName}}，{{data.info.specValue}}
						<text>x {{data.info.num}}</text>
					</view>
					<view class="attr">
						<text v-for="(item2,index2) in data.attrs"
							:key="index2">{{item2.propertyName}}：{{item2.propertyValue}};</text>
					</view>
				</view>
			</view>
		</view>
		<view class="info">
			退款信息
			<view class="yuany" @tap="data.show = true,data.isType = true">
				<view class="left">
					退款类型
				</view>
				<view class="right">
					{{data.typeArr[data.typeArr.map(item=>item.id).indexOf(data.obj.refundType)].n}}
					<image src="/static/img/index/140.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="yuany" @tap="data.show = true,data.isType = false">
				<view class="left">
					退款原因
				</view>
				<view class="right">
					{{data.obj.refundReason || '请选择退款原因'}}
					<image src="/static/img/index/140.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="money">
				<view class="left">
					<view>退款金额</view>
					不可修改，含运费
				</view>
				<view class="right">
					￥<input type="number" v-model="data.obj.refundAmount" />
				</view>
			</view>
		</view>
		<view class="pj">
			备注或退款凭证
			<textarea v-model="data.obj.remark" placeholder="添加退款备注，有利于商户更好处理售后问题"></textarea>
			<view class="imgs">
				<view class="imgItem" v-for="(item,index) in data.obj.refundFiles" :key="index">
					<image @tap="data.obj.refundFiles.splice(index,1)" src="/static/img/index/126.png" mode="widthFix">
					</image>
					<image @tap="previewImage(item)" v-if="!item.fileType"
						:src="data.httpUrl+'/app/file/viewFile?fileId='+item.fileId" mode="aspectFill"></image>
					<image v-else
						:src="data.httpUrl+'/app/file/viewFile?fileId='+item.fileId+'&process=video/snapshot,t_1000,f_jpg,w_800,h_600,m_fast'"
						mode="aspectFill"></image>
					<view @tap="previewVideo(item)" v-if="item.fileType">
						<image src="/static/img/index/131.png" mode="widthFix"></image>
					</view>
				</view>
				<view @tap="handeUpload" class="add">
					<image src="/static/img/index/139.png" mode="widthFix"></image>
					<text>上传凭证</text>
					<text>(最多4张)</text>
				</view>
			</view>
		</view>
		<view @tap="submit" class="bot" :class="data.obj.refundReason?'active':''">
			提交
		</view>
		<u-popup :round="20" :zIndex="9999" :show="data.show" @close="data.show = false">
			<view class="popup">
				<view class="top">
					退款{{data.isType?'类型':'原因'}}
				</view>
				<view class="list">
					<view @tap="handeClick(item)" class=""
						v-for="(item,index) in data.isType?data.typeArr:data.reasonArr" :key="index">
						{{item.n}}
						<image
							:src="(data.isType && item.id == data.obj.refundType) || (!data.isType && item.id == data.obj.refundReason)?'/static/img/index/49.png':'/static/img/index/52.png'"
							mode="widthFix"></image>
					</view>
				</view>
			</view>
		</u-popup>
		<PreviewVideo ref="previewVideoc" />
	</view>
</template>

<script setup lang="ts">
	import PreviewVideo from '@/components/previewVideo'
	import { refundReasonList, applyRefund, getRefundDetail } from '@/utils/api/goods'
	import imgUpload from '@/utils/imgUpload.ts'
	import { onLoad } from '@dcloudio/uni-app';
	import { setDialogView } from '@/utils/dialogView.ts'
	import {
		reactive,
		ref
	} from 'vue';
	const previewVideoc = ref()
	const data = reactive<any>({
		show: false,
		isType: false,
		obj: { refundType: 'ONLY_REFUND', refundFiles: [] },
		typeArr: [{ n: '仅退款', id: 'ONLY_REFUND' }, { n: '退款退货', id: 'ALL_REFUND' }, { n: '换货', id: 'CHANGE_PRODUCT' },],
		reasonArr: [],
		httpUrl: getApp().globalData.baseUrl,
		info: {},
		attrs: []
	})
	uni.$off('requestRefund')
	uni.$on('requestRefund', (e) => {
		if (e.attrs) {
			data.attrs = e.attrs;
		}
		console.log(e, 'ee')
		data.obj.groupOrderNo = e.groupOrderNo;
		data.obj.skuId = e.skuId;
		data.obj.refundAmount = e.productAmount;
		data.info = e;
	})
	onLoad(({ refundNo }) => {
		if (refundNo) {
			//编辑
			getRefundDetail({ data: { refundNo } }).then((res) => {
				res.data.productName = res.data.spuName;
				res.data.num = res.data.count;
				res.data.refundType = res.data.refundType.value;
				res.data.refundReason = res.data.reason;
				res.data.refundFiles = res.data.refundFileList.map((item) => {
					return { fileId: item.id, fileType: item.fileType == '.mp4' ? 'video' : '' }
				})
				data.info = res.data;
				data.obj = res.data;
				requstList()
				// data.obj.skuId = res.data.skuId;
				// data.obj.refundAmount = res.data.refundAmount;
				// data.obj.groupOrderNo = res.data.groupOrderNo;
				console.log(data.info, 'resss')
			})
		} else {
			requstList()
		}
	})
	const requstList = () => {
		refundReasonList({ data: { refundType: data.obj.refundType } }).then((res) => {
			const arr = [];
			res.data.map((item) => {
				arr.push({ n: item, id: item })
			})
			data.reasonArr = arr;
		})
	}
	const submit = () => {
		if (data.obj.refundReason) {
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
			applyRefund({ data: { ...data.obj, refundFiles: data.obj.refundFiles.map(item => item.fileId) } }).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						title: '提交成功!',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}
			})
		}

	}
	const previewVideo = (item) => {
		previewVideoc.value.init(item.fileId)
	}
	const handeUpload = () => {
		uni.showActionSheet({
			itemList: ['图片', '视频'],
			success: (e) => {
				if (e.tapIndex == 0) {
					uni.showActionSheet({
						itemList: ['拍摄', '从相册选择'],
						success: (e) => {
							let key = ''
							if (e.tapIndex == 0) {
								key = 'camera'
							} else {
								key = 'album'
							}
							setDialogView(key == 'camera' ? 'CAMERA' : 'READ_EXTERNAL_STORAGE').then(res => {
								if (res == 1) {
									uni.chooseImage({
										sourceType: [key],
										success: (e : any) => {
											imgUpload(e.tempFiles.map((item : any) => { return { ...item, filePath: item.path } }), (e : any) => {
												e.map((item : any) => {
													data.obj.refundFiles.push({ fileId: item.fileId })
												});
											})

										}
									})
								}
							})

						}
					})

				} else {
					uni.showActionSheet({
						itemList: ['拍摄', '从相册选择'],
						success: (e) => {
							let key = ''
							if (e.tapIndex == 0) {
								key = 'camera'
							} else {
								key = 'album'
							}
							setDialogView(key == 'camera' ? 'CAMERA' : 'READ_EXTERNAL_STORAGE').then(res => {
								if (res == 1) {
									uni.chooseVideo({
										sourceType: [key],
										success: (res) => {
											imgUpload([{ filePath: res.tempFilePath, fileType: 'video' }], (e : any) => {
												e.map((item : any) => {
													data.obj.refundFiles.push({ fileId: item.fileId, fileType: 'video' })
												});
											})

										}
									})

								}
							})

						}
					})
					// tempFilePath

				}

			}
		})
	}
	const previewImage = (item) => {
		uni.previewImage({
			current: 1,
			urls: [data.httpUrl + '/app/file/viewFile?fileId=' + item.fileId],
			loop: true,
		})
	}
	const handeClick = (item) => {
		data.show = false;
		if (data.isType) {
			data.obj.refundType = item.id;
			data.obj.refundReason = ''
			requstList()
		} else {
			data.obj.refundReason = item.id
		}
	}
</script>

<style lang="scss">
	.attr {

		text {
			font-size: 24rpx;
			color: #8C8C8C;
			display: inline-block;
			margin-right: 10rpx;
			margin: 0 !important;
		}
	}

	.popup {
		background: #fff;
		padding-bottom: 50rpx;

		.top {
			padding: 32rpx 0;
			border-bottom: 2rpx solid #f9f9f9;
			text-align: center;
		}

		.list {
			>view {
				padding: 0 32rpx;
				margin-top: 48rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 36rpx;
				}
			}
		}
	}

	.requestRefund {
		height: 100vh;
		background: #F5F5F5;
		padding: 24rpx;
		display: flex;
		flex-direction: column;

		>.bot {
			width: 100%;
			line-height: 80rpx;
			border-radius: 80rpx;
			text-align: center;
			color: #8C8C8C;
			font-size: 36rpx;
			background: #E5E5E5;
			margin-top: 50rpx;
		}

		>.active {
			background: #6B64D3;
			color: #fff;
		}

		.imgs {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.imgItem {
				position: relative;

				>image:nth-of-type(1) {
					width: 36rpx;
					position: absolute;
					right: -10rpx;
					top: -10rpx;
					z-index: 8;
				}

				>image:nth-of-type(2) {
					width: 100%;
					height: 100%;
					border-radius: 24rpx;
				}

				view {
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					right: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 7;

					image {
						width: 40rpx;
					}
				}
			}

			>view {
				width: 24%;
				border-radius: 7rpx;
				margin-right: 1.33333%;
				height: 152rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

			}

			.add {
				border-radius: 7rpx;
				border: 2rpx solid #BFBFBF;

				image {
					width: 40rpx;
				}

				text:nth-of-type(1) {
					color: #8C8C8C;
					font-size: 24rpx;
					margin: 10rpx 0;
				}

				text:nth-of-type(2) {
					color: #BFBFBF;
					font-size: 20rpx;
				}
			}

			>view:nth-of-type(4n) {
				margin-right: 0;
			}
		}

		.pj {
			flex: 1;
			border-radius: 24rpx;
			background: #fff;
			padding: 24rpx;
			font-size: 32rpx;

			textarea {
				height: 180rpx;
				background: #F5F5F5;
				font-size: 24rpx;
				margin-top: 24rpx;
				padding: 24rpx;
				border-radius: 16rpx;
				width: 100%;
			}
		}

		.info {
			border-radius: 24rpx;
			background: #fff;
			padding: 24rpx;
			font-size: 32rpx;
			margin: 20rpx 0;

			.money {
				display: flex;
				align-items: flex-start;
				margin-top: 32rpx;
				justify-content: space-between;

				.left {
					display: flex;
					flex-direction: column;
					color: #8C8C8C;
					font-size: 24rpx;

					view {
						display: flex;

						&::after {
							content: '*';
							display: inline-block;
							color: #EB432F;
							margin-left: 5rpx;
						}

						align-items: center;
					}

				}

				.right {
					display: flex;
					align-items: center;

					color: #6B64D3;
					font-size: 32rpx;

					input {
						width: 100rpx;
					}
				}
			}

			.yuany {
				display: flex;
				align-items: center;
				margin-top: 32rpx;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					&::after {
						content: '*';
						display: inline-block;
						color: #EB432F;
						margin-left: 5rpx;
					}
				}

				.right {
					display: flex;
					align-items: center;
					color: #8C8C8C;

					image {
						width: 28rpx;
						margin-left: 5rpx;
					}
				}
			}
		}

		>.top {
			border-radius: 24rpx;
			background: #fff;
			padding: 24rpx;
			font-size: 32rpx;

			.goods {
				margin-top: 24rpx;
				display: flex;
				align-items: center;

				.left {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					background: #ccc;
					margin-right: 24rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.right {
					flex: 1;
					width: 0;
					display: flex;
					flex-direction: column;

					>text:nth-of-type(2) {
						margin: 10rpx 0;
						color: #EB432F;
					}

					>view:nth-of-type(1) {
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: #8C8C8C;
						width: 100%;

						text {
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>